1"use client";
2
3import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
4import { useActionState, useState } from "react";
5import { useUser } from "@/(main)/providers/user-provider";
6import {
7  type CreateRepositoryActionResult,
8  createRepositoryAction,
9} from "@/actions";
10import { Dialog, DialogContent, DialogTitle } from "@/ui/dialog";
11
12export default function CreateRepoDialog({
13  open,
14  setOpen,
15}: {
16  open: boolean;
17  setOpen: (open: boolean) => void;
18}) {
19  const { user } = useUser();
20  const [repoName, setRepoName] = useState("");
21  const [state, formAction, isPending] = useActionState(
22    async (_prev: CreateRepositoryActionResult | null, formData: FormData) => {
23      const result = await createRepositoryAction(formData);
24      if ("repository" in result) {
25        setOpen(false);
26        setRepoName("");
27      }
28      return result;
29    },
30    null,
31  );
32
33  const isValid = repoName.trim() !== "";
34
35  return (
36    <Dialog open={open} onOpenChange={setOpen}>
37      <DialogContent
38        className="max-w-md min-w-md border-black rounded-xs shadow-2xl top-[35%] p-0 overflow-hidden"
39        animations={true}
40        showOverlay={true}
41      >
42        <VisuallyHidden>
43          <DialogTitle>New repository</DialogTitle>
44        </VisuallyHidden>
45        <form action={formAction} className="relative">
46          <div className="flex flex-col gap-1 p-2 border-b border-border">
47            <label
48              htmlFor="repo-name"
49              className="text-xs text-muted-foreground"
50            >
51              Name
52            </label>
53            <input
54              type="text"
55              id="repo-name"
56              name="repo-name"
57              placeholder="Project name..."
58              value={repoName}
59              onChange={(e) => setRepoName(e.target.value)}
60              className="w-full bg-background outline-none"
61              disabled={isPending}
62            />
63          </div>
64          <div className="flex flex-col gap-1 p-2 border-b border-border">
65            <label htmlFor="owner" className="text-xs text-muted-foreground">
66              Owner
67            </label>
68            <select
69              id="owner"
70              name="owner"
71              className="w-full text-sm bg-background outline-none"
72              disabled={isPending}
73            >
74              <option value={user?.name}>{user?.name}</option>
75            </select>
76          </div>
77          <div className="flex flex-col gap-1 p-2 border-b border-border">
78            <label
79              htmlFor="visibility"
80              className="text-xs text-muted-foreground"
81            >
82              Visibility
83            </label>
84            <select
85              id="visibility"
86              name="visibility"
87              className="w-full text-sm bg-background outline-none"
88              disabled={isPending}
89            >
90              <option value="public">Public</option>
91              <option value="private">Private</option>
92            </select>
93          </div>
94          {state && "error" in state && (
95            <p className="text-xs text-red-500 px-3 pb-2">{state.error}</p>
96          )}
97          <div className="flex items-center justify-between pl-2 py-2 border-t border-border h-9">
98            <span className="text-xs text-muted-foreground">
99              Create a new repository
100            </span>
101            <div>
102              <button
103                type="reset"
104                className="px-3 py-1.5 h-9 text-xs border-b border-l border-r hover:bg-accent/50"
105                onClick={() => setOpen(false)}
106              >
107                Cancel
108              </button>
109              <button
110                type="submit"
111                disabled={!isValid || isPending}
112                className="px-3 py-1.5 h-9 text-xs bg-primary text-primary-foreground disabled:opacity-50 disabled:cursor-not-allowed"
113              >
114                {isPending ? "Creating..." : "Create"}
115              </button>
116            </div>
117          </div>
118        </form>
119      </DialogContent>
120    </Dialog>
121  );
122}
123